<template>
  <div class="audit-drawer">
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="请假缘由" prop="name">
        <el-input v-model="ruleForm.name" :disabled="canEditname"></el-input>
      </el-form-item>
      <el-form-item label="请假日期" prop="time">
        <el-date-picker
          v-model="ruleForm.time"
          type="date"
          placeholder="选择日期"
          value-format="yyyy-MM-dd"
          :disabled="canEditname"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="请假天数" prop="day">
        <el-input-number
          v-model="ruleForm.day"
          :min="1"
          :disabled="canEditname"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="审核状态" prop="status" v-if="!isStudentRole">
        <el-select v-model="ruleForm.status" placeholder="请选择审核状态">
          <el-option label="待提交" :value="0"></el-option>
          <el-option label="待审核" :value="1"></el-option>
          <el-option label="已通过" :value="2"></el-option>
          <el-option label="已拒绝" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审核意见" prop="reason" v-if="!isStudentRole">
        <el-input type="textarea" v-model="ruleForm.reason"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')" v-if="!canEditname || isAudit" 
          >提交</el-button
        >
        <el-button type="primary" @click="recall('ruleForm')" v-else
          >撤销</el-button
        >
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { saveAudit } from "@/api/sys/audit";

export default {
  props: {
    isEdit: {
      type: Boolean,
      default: false,
    },
    isAudit: {
      type: Boolean,
      default: false,
    },
    record: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      ruleForm: {
        id: null,
        name: "", //请假缘由
        time: "", //请假日期
        day: 1, //请假天数
        status: 0, // 0: 待提交, 1: 待审核, 2: 已通过, 3: 已回退
        reason: "", //审核意见
        userId: this.$store.state.userInfo.id, // 请假用户ID
      },
      rules: {
        name: [{ required: true, message: "请输入请假缘由", trigger: "blur" }],
        time: [
          { required: true, message: "请选择请假日期", trigger: "change" },
        ],
        day: [{ required: true, message: "请输入请假天数", trigger: "change" }],
      },
    };
  },
  computed: {
    isStudentRole() {
      return this.$store.state.userInfo.role === "ROLE_STUDENT";
    },
    canEditname() {
      //只有当为学生的时候并且状态为待审核的时候可以编辑请假缘由
      return (this.isStudentRole && this.ruleForm.status === 1) || !this.isStudentRole;
    },
  },
  watch: {
    record: {
      handler(newVal) {
        if (newVal && Object.keys(newVal).length > 0) {
          this.ruleForm = { ...newVal };
          console.log("this.ruleForm", this.ruleForm);
        } else {
          this.resetForm();
          this.ruleForm.userId = this.$store.state.userInfo.id;
        }
      },
      immediate: true,
    },
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            if (this.isEdit) {
              this.ruleForm.status = 1; //编辑状态
            }else if (this.isAudit) {
              this.ruleForm.status = 2; //审核通过状态
            }
            const res = await saveAudit(this.ruleForm);
            if (res.code === 200) {
              this.$message.success("保存成功");
              this.$emit("success");
              this.$emit("close");
            } else {
              this.$message.error(res.message);
            }
          } catch (error) {
            this.$message.error("保存失败");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //回退
      recall(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          try {
            this.ruleForm.status = 0; // 撤销状态
            const res = await saveAudit(this.ruleForm);
            if (res.code === 200) {
              this.$message.success("撤销成功");
              this.$emit("success");
            } else {
              this.$message.error(res.message);
            }
          } catch (error) {
            this.$message.error("保存失败");
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm() {
      this.ruleForm = {
        id: null,
        name: "",
        time: "",
        day: 1,
        status: 0,
        reason: "",
        userId: this.$store.state.userInfo.id,
      };
      if (this.$refs.ruleForm) {
        this.$refs.ruleForm.resetFields();
      }
    },
  },
};
</script>

<style scoped>
.audit-drawer {
  padding: 20px;
}
</style>